import React from 'react'
import './index.scss'
export default function MyCount({ goods_count, changeGoodsCount }) {
  const handleClick = (tag) => {
    // !#2 子组件调用传递过来的方法的同时并传递数据
    // 传递 ID
    // 传递期望看到的 goods_count
    let num
    if (tag === 'reduce') {
      // 减
      num = goods_count - 1
      // 点击减的时候小于 1 就返回
      if (num < 1) return
      // changeGoodsCount(id, goods_count - 1)
    } else if (tag === 'add') {
      // 加
      num = goods_count + 1
      // changeGoodsCount(id, goods_count + 1)
    }
    changeGoodsCount(num)
  }
  return (
    <div className='my-counter'>
      <button
        type='button'
        className='btn btn-light'
        onClick={() => handleClick('reduce')}
      >
        -
      </button>
      <input type='number' className='form-control inp' value={goods_count} />
      <button
        type='button'
        className='btn btn-light'
        onClick={() => handleClick('add')}
      >
        +
      </button>
    </div>
  )
}
